<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./echarts-all.js"></script>
</head>
<body>
    <div class="current_pledge" style="height: 228px;width:428px; "></div>


    <script>
       var currentPledgeEle = document.getElementsByClassName('current_pledge')[0]
	var currentPledgeCharts = echarts.init(currentPledgeEle)
	var linestyle1=[
                  [
                   0.2, "#c3a"], [0.4, "#48b"], [0.8, "#ff4500"], [1, "#4ff"
                  ]
                 ];
	var currentPledge = {
			tooltip: {
		        formatter: "{a} <br>{b} : {c}%"
		    },

		    series: [
		        {
		            name: "在押人数",
		            type: "gauge",
		            detail: {
		                formatter: "{value}%",
		                show: true,
		                offsetCenter: ['-100%', '-0%'],
		                backgroundColor: "rgba(0,0,0,0)"
		            },
		            data: [
		                {
		                    value: 60.46,
		                    name: "当前押量1690人"
		                }
		            ],
		            axisLine: {
		                lineStyle: {
		                    color: linestyle1
		                }
		            },
		            radius: "100%",
		            startAngle: 140,
		            endAngle: -140,
		            title: {
		                show: true,
		                offsetCenter: ['-100%', '20%'],
		                textStyle: {
		                    fontSize: 20,
		                    color:'#eee'
		                }
		            },
		            axisLabel: {
		                show: false
		            }
		        }
		    ],
		    animationEasing: "QuinticIn"
	}
	currentPledgeCharts.setOption(currentPledge)
    </script>
</body>
</html>